/**
 * @description  : demo 示例
 * @descriptionDetail : 示例
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 16:15:51
 */
<template>
  <view class="page">
    <u-form :model="formData" :error-type="errorType" ref="uForm">
      <u-form-item :label-width="labelWidth" label="字典组件" prop="dCodeName" required>
        <z-dict-select dictType="C_CASE_SOURCE" v-model="formData.dCodeName" @confirm="handleDictConfirm"></z-dict-select>
      </u-form-item>
      <p class="desc">
        使用场景：字典项超过3个或字典项名称过长时使用
      </p>
      <u-form-item :label-width="labelWidth" label="字典多选" prop="checkboxs">
        <z-dict-checkbox dictType="C_AREA_TYPE" v-model="formData.checkboxs"></z-dict-checkbox>
      </u-form-item>
      <p class="desc">
        使用场景：多选(字典项少于3项)时使用
      </p>
      <u-form-item :label-width="labelWidth" label="字典多选弹窗" prop="checkboxListName" required>
        <z-dict-checkbox :popup="true" dictType="C_STAT_TYPE" v-model="formData.checkboxListName" @confirm="handleCk"></z-dict-checkbox>
      </u-form-item>
      <p class="desc">
        使用场景：多选(字典项超过3项或字典项名称较长)时使用
      </p>
      <u-form-item :label-width="labelWidth" label="字典单选" prop="radios">
        <z-dict-radio dictType="APCD_CHECK_CIGTYPE" v-model="formData.radios"></z-dict-radio>
      </u-form-item>
      <p class="desc">
        使用场景：字典项不超过3个或字典项不满一行时使用
      </p>
      <u-form-item :label-width="labelWidth" label="switch选择" prop="switch">
        <template #right>
          <u-switch v-model="formData.switch" @change="handleSwitch"></u-switch>
        </template>
      </u-form-item>
      <p class="desc">
        使用场景：是否选择时使用
      </p>
      <u-form-item :label-width="labelWidth" label="行政区划" prop="areaName">
        <z-area-select root="330000" v-model="formData.areaName" @confirm="handleAreaConfirm"></z-area-select>
      </u-form-item>
      <p class="desc">
        使用场景：行政区划选择
      </p>
      <u-form-item :label-width="labelWidth" label="组织机构" prop="orgName">
        <z-org-select treeType="zm-all" limitNodeType="05" v-model="formData.orgName" @confirm="handleOrgConfirm"></z-org-select>
      </u-form-item>
      <p class="desc">
        使用场景：组织机构选择
      </p>
      <u-form-item :label-width="labelWidth" label="人员单选" prop="userName">
        <z-user-select v-model="formData.userName" @confirm="handleUserConfirm"></z-user-select>
      </u-form-item>
      <p class="desc">
        使用场景：人员单选
      </p>
      <u-form-item :label-width="labelWidth" label="人员多选" prop="userNames">
        <z-user-select :isSingle="false" v-model="formData.userNames" @confirm="handleUsersConfirm"></z-user-select>
      </u-form-item>
      <p class="desc">
        使用场景：人员多选
      </p>
      <u-form-item :label-width="labelWidth" label="文本" prop="text">
        <u-input placeholder="请输入" v-model="formData.text" />
      </u-form-item>
      <p class="desc">
        使用场景：普通文本输入
      </p>
      <u-form-item :label-width="labelWidth" label="日期" prop="date">
        <z-date placeholder="请输入" format="yyyy-MM-dd HH:mm:ss" v-model="formData.date" />
      </u-form-item>
      <p class="desc">
        使用场景：日期
      </p>
      <u-form-item :label-width="labelWidth" label="数字" prop="number">
        <u-input type="number" placeholder="请输入" v-model="formData.number" />
      </u-form-item>
      <p class="desc">
        使用场景：数字输入
      </p>
      <u-form-item :label-width="labelWidth" label="车牌号输入" prop="carNumber">
        <z-car-keyboard v-model="formData.carNumber"></z-car-keyboard>
      </u-form-item>
      <p class="desc">
        使用场景：车牌号输入
      </p>
      <u-form-item :label-width="labelWidth" label="身份证号输入" prop="credNum">
        <z-cred-keyboard v-model="formData.credNum"></z-cred-keyboard>
      </u-form-item>
      <p class="desc">
        使用场景：身份证号输入
      </p>
      <u-form-item :label-width="labelWidth" label="数字键盘" prop="num">
        <z-num-keyboard v-model="formData.num"></z-num-keyboard>
      </u-form-item>
      <p class="desc">
        使用场景：数字键盘输入
      </p>
      <u-form-item :label-width="labelWidth" label="textarea" prop="textarea">
        <u-input type="textarea" placeholder="请输入" v-model="formData.textarea" />
      </u-form-item>
      <p class="desc">
        使用场景：文本输入内容比较多时使用
      </p>
      <u-form-item :label-width="labelWidth" label="附件上传">
        <upload-images
          :url="uploadFile"
          :length="10"
          :extForm="{fiGroupCode: 'zmng-images', bizId: 'a22222'}"
          :del-url="delUrl"
          :can-add="true"
          :can-del="true"
          :renderImages="renderImages"
          ref="saveModel3"
        >
        </upload-images>
      </u-form-item>
    </u-form>
    <u-line color="blue" />
    <view style="margin-top:20px;">
      {{ formData }}
    </view>
    <u-action-sheet :list="sheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
    <u-button type="primary" size="medium" @click="handleSubmit">
      提交
    </u-button>
    <u-button type="primary" size="medium" @click="handleGoTo">
      卷烟选择
    </u-button>
    <u-button type="primary" size="medium" @click="handleGoToRetList">
      零售户选择
    </u-button>
  </view>
</template>
<script>
import commonService from '@/service/internal/common.service';
import uSwitch from '@/uview-ui/components/u-switch/u-switch.vue';
import {ZDictSelect,ZDictRadio, ZDictCheckbox, ZAreaSelect, ZUserSelect,
  ZOrgSelect,ZCarKeyboard,ZCredKeyboard,ZNumKeyboard,ZDate,UploadImages,} from '@/components'
export default {
  components: { uSwitch,ZDictSelect,ZDictRadio, ZDictCheckbox, ZAreaSelect,ZOrgSelect,
    ZCarKeyboard,ZCredKeyboard,ZNumKeyboard,ZDate,ZUserSelect,UploadImages,},
  data() {
    return {
      dicts: {},
      showCigarList: false,
      formData: {
        dCode: "", 
        dCodeName: '',
        checkboxs: "",
        checkboxList: "",
        checkboxListName: "",
        radios:"02", 
        switch: false,
        text: "",
        number: 0,
        textarea: "",
        areaCode: "",
        areaName: "",
        orgUuid: "",
        orgName: "",
        userId: "",
        userName: "",
        userIds: "",
        userNames: "",
        carNumber: "浙A4456",
        credNum: '',
        num: null,
        date: '2021-11-11 11:11:11',
      },
      imgs: [],
      uploadFile: commonService.uploadFile,
      delUrl: commonService.deleteFile,
      actionSheetShow: false,
      labelPosition: 'left',
      labelWidth: 180,
      labelAlign: "left",
      errorType: ['border-bottom','message',],
      border: true,
      selectShow: false,
      checkboxList: [],
      radioList: [],
      sheetList: [],
      radioCheckWidth: 'auto',
      radioCheckWrap: false,
      dictShow: false,
      rules: {
        dCodeName: [
          {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change',],
          },
        ],
        checkboxListName: [
          {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change',],
          },
        ],
        text: [
          {
            min: 3, 
            message: '不能少于3个字符', 
            trigger: 'change',
          },
        ],
        carNumber: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change',],
          },
          {
            validator: (rule, value) => {
              return this.$u.test.carNo(value);
            },
            message: '请输入正确的车牌号',
            trigger: ['change',],
          },
        ],
        credNum: [
          {
            required: true,
            message: '请输入身份证号',
            trigger: ['blur', 'change',],
          },
          {
            validator: (rule, value) => {
              return this.$u.test.idCard(value);
            },
            message: '请输入正确的身份证号',
            trigger: ['blur', 'change',],
          },
        ],
        num: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change',],
          },
        ],
        date: [
          {
            required: true,
            message: '请选择日期',
            trigger: ['blur', 'change',],
          },
        ],
      },
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  created() {
    console.log(this.$u);
    setTimeout(() => {
      console.log("延时赋值");
      this.formData.checkboxs = "3001,3002";
    }, 5000);
  },
  methods: {
    actionSheetCallback(sheetIdx) {
      this.formData.sex = this.sheetList[sheetIdx].text;
    },
    // 字典选中确认
    handleDictConfirm(item) {
      console.log("调用选中", item);
      this.formData.dCode = item.value;
      this.formData.dCodeName = item.label;
    },
    handleSubmit() {
      this.$refs.uForm.validate().then(valid => {
        console.log("校验结果", valid, this.formData);
        if (valid) {
          this.$u.toast('校验通过')
        } else {
          this.$u.toast('请检查')
        }
      }).catch(errors => {
        console.error(errors);
        this.$u.toast('校验失败')
      })
    },
    handleSwitch(sw) {
      this.radioCheckWrap = sw;
    },
    handleCk({name, value,}) {
      console.log("选中", name, value);
      this.formData.checkboxList = value;
      this.formData.checkboxListName = name;
    },
    handleMultiSelect(arg) {
      console.log("选中了", arg);
    },
    handleAreaConfirm(arg) {
      this.formData.areaCode = arg.value;
      this.formData.areaName = arg.name;
    },
    handleOrgConfirm(arg) {
      console.log("选中的组织机构", arg);
      this.formData.orgUuid = arg.value;
      this.formData.orgName = arg.name;
    },
    handleUserConfirm(arg) {
      console.log("选中的人员", arg);
      this.formData.userId = arg.value;
      this.formData.userName = arg.name;
    },
    handleUsersConfirm(arg) {
      console.log("选中的人员", arg);
      this.formData.userIds = arg.value;
      this.formData.userNames = arg.name;
    },
    renderImages(){
      return commonService.findFilesByBizId('a22222').then(r => {
        r.data.forEach(i => {
          i.src = `${commonService.downloadFile}?fileId=${i.gfiId}&tk=${uni.getStorageSync("tk")}`;
          i.filePath = i.src;
        });
        return r.data;
      });
    },
    handleGoTo() {
      this.$u.route("/pages/internal/cigarSelectList");
    },
    handleGoToRetList() {
      this.$u.route("/pages/internal/retailerList");
    },
    // 根据页面返回的参数处理相应逻辑, 方法名updateBackState固定
    updateBackState(param){
      // 选中的卷烟
      console.log("选中的数据", param);
      let cigars = param[this.$rp.internal.CIGAR_SELECT];
      if (cigars) {
        this.$u.toast("选中了" + (cigars.map(c => c.productName).join(",")));
      }
      console.log("选中的零售户", param[this.$rp.check.CHECK_CLIENT]);
    },
  },
};
</script>
<style lang="scss" scoped>
.desc {
  color: #6744f6;
  font-size: 13px;
}
</style>